<template>
  <div class="scoreStatistics scrollY">
    <Back />
    <Title label="评分总览" />
    <div class="overview">
      <div style="flex: 1;">
        <basicRadar />
      </div>
      <div style="flex: 1;">
        <bar />
      </div>
    </div>
    <Title label="评分明细" />
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="一级指标" width="180" />
      <el-table-column prop="name" label="指标权重" />
      <el-table-column prop="amount1" label="二级指标" />
      <el-table-column prop="amount2" label="指标分值" />
      <el-table-column prop="amount3" label="指标得分" />
    </el-table>
  </div>
</template>

<script setup lang='ts'>
import Back from "@/components/Back.vue";
import Title from '@/components/Title.vue';
import bar from '@/components/echart/barLeft.vue';
import basicRadar from '@/components/echart/basicRadar.vue';
import { ref, reactive } from 'vue';
import { Delete, Plus, Edit, Search, Share, Upload, Refresh } from '@element-plus/icons-vue';
const activeName = ref('project');
const objectSpanMethod = ({
  row,
  column,
  rowIndex,// 一行 0 0 0 0 0 1 1 1 1 1
  columnIndex, // 一列 0 1 2 3 4 0 1 2 3 4
}: any) => {
  if (columnIndex === 0) {
    if ( rowIndex < 3 && columnIndex === 0) {
      return {
        rowspan: 1,
        colspan: 4,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const tableData = [
  {
    id: '内容',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
   {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
]
const title = '各行政区碳排放量情况';
    const   datas = { // 各行政区碳排放量情况
        xAxisData: [1,2,3,3],
        yAxisData: [12,23,23,23]
      };
 // 饼状图颜色和标题
 const obj = {
        title: '各行业碳排放量占比情况',
        color: ['#65B0F8', '#97F380', '#E08D52', '#78FBFA', '#F6E166', '#3C87F3', '#9265AF', '#9EC97F']
      };
      // 饼状图数据
    const  datas2 = [
        { value: 20, name: '电力' },
        { value: 20, name: '钢铁' },
        { value: 15, name: '建材' },
        { value: 15, name: '造纸' },
        { value: 12, name: '化工' },
        { value: 35, name: '有色' },
        { value: 12, name: '石化' },
        { value: 18, name: '其他' }
      ];

</script>

<style scoped lang='scss'>
.scoreStatistics{
  padding: 50px 50px;
  padding-bottom: 80px;
  .overview{
    border-radius: 8px;
    background-color: rgba(255,255,255,1);
    color: rgba(16,16,16,1);
    font-size: 14px;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
    font-family: Roboto;
    margin-top: 10px;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    .dataSetNumber{
      li{
        width: 260px;
        height: 120px;
        background:url('@/assets/score1.png') no-repeat;
        display: flex;
        img{
          width: 61px;
          height: 61px;
          margin:28px 23px 0 20px;
        }
        .score{
          span{
            font-family: Roboto;
            display: block;
          }
          .label{
            color:#fff;
            margin-top: 20px;
            font-size: 18px;
          }
          .value{
            color:#fff;
            margin-top: 10px;
            font-size: 30px;
          }
        }
      }
      li:last-child{
        background:url('@/assets/score2.png') no-repeat;
        margin-top: 30px
      }
    }
  }
  .scoreAndUpload{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    .scoreUl{
      display: flex;
      li{
        font-family: PingFangSC, PingFang SC;
        font-size: 18px;
        color: #999;
        line-height: 33px;
        letter-spacing: 3px;
        text-align: left;
        font-style: normal;
        position: relative;
        cursor: pointer;
      }
    
      li:last-child{
        margin-left: 10px;
        text-indent: 10px
      }
      li:last-child::before{
        content: '';
        height: 60%;
        display: inline-block;
        border: 1px solid #999;
        background: #999;
        position: absolute;
        top: 6px;
        left: 0px;
      }
      .active{
        color: #000;
        font-weight: 550;
      }
    }
    .uploadData{
      width: 120px;
      height: 32px;
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #0091FF;
      font-family: PingFangSC, PingFang SC;
      font-size: 14px;
      color: #0091FF;
      line-height: 25px;
      letter-spacing: 2px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .uploadData:hover{
      background-color: #f5f5f5;
    }
  }
  .scoreList{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .scoreListItem{
      cursor: pointer;
      width: 32%;
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25);
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,0.1);
      padding: 14px 17px;
      .label{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: rgba(0,0,0,0.74);
        line-height: 25px;
        text-align: left;
        font-style: normal;
      }
      .value{
        font-family: STHeitiSC, STHeitiSC;
        font-weight: 300;
        font-size: 14px;
        color: rgba(0,0,0,0.68);
        line-height: 25px;
        font-style: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin-top: 5px;
      }
      .lookList{
        color: rgba(0,0,0,0.38);
        margin-top: 10px;
        display: flex;
          span{
          padding:0 10px;
          border-right: 2px solid rgba(0,0,0,0.28);
          display: flex;
          align-items: center;
          font-size: 15px;
          .elIcon{
            margin-right: 10px
          }
        }
        span:last-child{
          border: 0;
        }
        span:first-child{
          padding-left:0;
        }
      }
    }
  }
  .pagination{
    display: flex;
    justify-content: flex-end;
    ::v-deep .el-pagination{
      background: #f6f6f6 !important;
      .el-pager li,button{
        background: #f6f6f6 !important;
      }
    }
  }
}
</style>